<script setup>
import {ref,onMounted,reactive } from 'vue'
import Commodity from '@/components/app/CommodityApp.vue';
import axios from 'axios';
import { showMsg,showDialog } from '@/components/Util';
let optype = ref('new')
let list = ref([])
let title = ref('添加商品')
function getData(){
    axios.post('/api/student_list').then(res=>{
        if(res.data.status==200){
            list.value = res.data.data
        }else{
            showMsg("获取数据失败",'error',2000)
        }
    })
}
function newStudent(){
    addshow.value = false
    getData();
}

function del(id){
    showDialog({msg:'确认删除?'}).then(res=>{
    axios.delete('/api/student_delete/'+id).then(res=>{
        console.log(res)
        if(res.data.status==200){
            getData()
        }else{
            showMsg(res.data.msg,'error',2000)
        }
    })
})
}
function edit(id){
    //显示表单窗口
    //显示数据到窗口
    addshow.value = true;
    let obj = list.value.filter(item=>item.id==id);
    console.log(obj);
    student.value = obj[0];
    optype.value = 'edit'
    title.value = '修改商品'
}
let student = ref({name:'',id:'',xuehao:'',sex:'',mobile:'',addr:''});
let addshow = ref(false)
onMounted(()=>{
    getData()
})
function news(){
    addshow.value=true
    title.value='添加商品'
}

</script>
<template >
    <Commodity :title="title" :type="optype" :student="student" v-show="addshow" @submit="newStudent" @close="addshow=false" ></Commodity>
    <div class="page">
        <div class="tool">
            <button @click="news">添加商品</button>
        </div>
        <ul class="list">
            <div class="list1">
                <span>商品</span>
                <span>商品价格</span>
                <span>库存</span>
                <span>销量</span>
                <span>是否上架</span>
                <span>按钮</span>
            </div>
            <li class="item" v-for="item in list" :key="item.id">
                <span class="it">{{ item.name }}</span>
                <span>{{ item.xuehao }}</span>
                <span>{{ item.mobile }}</span>
                <span>{{ item.addr }}</span>
                <span>{{ item.sex }}</span>
                <span>
                    <button @click="del(item.id)">删除商品</button>
                    <button @click="edit(item.id)">修改商品</button>
                </span>
            </li>
        </ul>
    </div>
</template>
<style scoped>
.list{
    margin-bottom: 20px;
    padding: 0;
    box-sizing: border-box;
    height: 200px;
}
.list1{
    height: 50px;
    background-color: rgb(255, 80, 0);
    display: grid;
    grid-template-columns: repeat(6,1fr);
    list-style: none;
}
.list1>span{
    display: flex;
    justify-content: center;
    align-items: center;
}
.list>li{
    display: grid;
    grid-template-columns:repeat(6,1fr);
}
.item>span{
    height: 50px;
    display: flex;
    justify-content: center;
    /* text-align: center; */
    padding-top: 30px;
}
.item button{
    width: 90px;
    height: 25px;
}
span{
    border: rgb(255, 80, 0) 1px solid;
}
.it{
    display: flex;
}
</style>